<h2>Classic</h2>
<textarea id="editor1" cols="10" rows="10">
	<p>
		Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.
		Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.
	</p>
	<ol>
		<li>List item with a plain text only.</li>
		<li>
			<p>List item with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.</p>
		</li>
		<li>List item with a plain text only.</li>
	</ol>
	<p>Last paragraph with an <a href="#">example link</a>.</p>
</textarea>

<h2>Inline</h2>
<div id="editor2" contenteditable="true">
	<p>
		Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>. Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.
	</p>
	<ol>
		<li>List item with a plain text only.</li>
		<li>
			<p>List item with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.</p>
		</li>
		<li>List item with a plain text only.</li>
	</ol>
	<p>Last paragraph with an <a href="#">example link</a>.</p>
</div>

<h2>Divarea</h2>
<textarea id="editor3" cols="10" rows="10">
	<p>
		Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.
		Sample paragraph with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.
	</p>
	<ol>
		<li>List item with a plain text only.</li>
		<li>
			<p>List item with <em>emphasize</em>, <strong>strong</strong>, <u>underline</u> and <s>strikethrough</s>.</p>
		</li>
		<li>List item with a plain text only.</li>
	</ol>
	<p>Last paragraph with an <a href="#">example link</a>.</p>
</textarea>

<script>
	if ( CKEDITOR.env.ie && CKEDITOR.env.version === 8 ) {
		bender.ignore();
	}

	CKEDITOR.disableAutoInline = true;

	var config = {
		height: 300,
		on: {
			instanceReady: function( evt ) {
				// Register the toolbar for inline elements.
				evt.editor.balloonToolbars.create( {
					buttons: 'Bold,Underline',
					cssSelector: 'strong, em'
				} );

				evt.editor.balloonToolbars.create( {
					buttons: 'Link,Unlink',
					cssSelector: 'a[href], img'
				} );

				evt.editor.balloonToolbars.create( {
					buttons: 'BulletedList,NumberedList',
					cssSelector: 'li'
				} );
			}
		}
	};

	CKEDITOR.replace( 'editor1', config );
	CKEDITOR.inline( 'editor2', config );

	config.extraPlugins = 'divarea';
	CKEDITOR.replace( 'editor3', config );
</script>
